<template>
    <div>
        <h1>Home页面</h1>
        <el-button @click="jumpUser">
            跳转到user页面1
        </el-button>

        <el-button @click="jumpUserName">
            跳转到username页面
        </el-button>

        <el-button @click="jumpNoexistPage">
            跳转到一个不存在的页面
        </el-button>

        <el-button @click="jumpUserPage">
            跳转到user页面2
        </el-button>

        <el-button @click="jumpUserPage3">
            跳转到user页面3
        </el-button>

        <el-button @click="jumpUserPage4">
            跳转到user页面4
        </el-button>

        <el-button @click="jumpUserPage5">
            跳转到user页面5
        </el-button>

        <el-button @click="routerGo1">
            router.go(-1)
        </el-button>

        <el-button @click="pushStateEvent">
            pushState
        </el-button>
        <!-- 命名路由 -->
        <router-link :to="{ name: 'user', params: { userId: 456 } }">
            跳转到User页面
        </router-link>
        <!-- 命名视图 -->
        
        <div>
            <el-button @click="jumpSearchUser">
                跳转到SearchUser页面
            </el-button>
        </div>

    </div>
</template>

<script>
    export default {
        mounted() {
            
        },
        methods: {
            jumpUser() {
                this.$router.push('user/123');
            },
            jumpUserName() {
                this.$router.push('user/wangxiao/post/123');
            },
            jumpNoexistPage() {
                this.$router.push('no-exist');
                console.log('this.$route.params.pathMatch',this.$route.params.pathMatch);
            },
            jumpUserPage() {
                //字符串
                this.$router.push('user');
            },
            jumpUserPage3() {
                //对象
                this.$router.push({ path: 'user' });
            },
            jumpUserPage4() {
                //命名的路由
                this.$router.push({
                    name: 'user',
                    params: { userId: 123 }
                }).then(()=>{
                    console.log('命名的路由');
                })
            },
            jumpUserPage5() {
                //带查询参数
                this.$router.push({
                    path: 'user',
                    query: {
                        userId: 101,
                    }
                }).then(()=>{
                    console.log('push成功之后');
                })
            },
            routerGo1() {
                this.$router.go(-1)
            },
            pushStateEvent() {
                window.history.pushState(null,null,'user');
            },
            //跳转到SearchUser
            jumpSearchUser() {
                this.$router.push({ path: '/search', query: { searchId: 'vue' }});
            },
        }
    }
</script>